<template>
  <el-card class="box-card" style="width: 100%;height: 100%">
    <div slot="header" class="clearfix">
      <span style="font-weight:bold;font-size: 20px">待结算订单</span>
      <el-input style="width:200px;margin:0 10px 0 20px"
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="inputSelect">
      </el-input>

      <el-button round @click="search">搜索</el-button>

      <el-button style="float: right; padding: 3px 0" type="text" @click="refresh()">
        <i class="el-icon-refresh-left"><span> 刷新页面</span></i>
      </el-button>
    </div>

    <el-dialog width="40%" title="订单详情" :visible.sync="dialogTableVisible">
      <el-form label-position="left" inline class="demo-table-expand">
        <el-row :gutter="60">
          <el-col :span="12">
            <el-form-item label="订单号：">
              <span>{{ orderData.orderNum }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务标题：">
              <span>{{ orderData.taskTitle }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="60">
          <el-col :span="12">
            <el-form-item label="任务发布人：">
              <span>{{ orderData.publishingName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务接取人：">
              <span>{{ orderData.receiveTaskUser }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="60">
          <el-col :span="12">
            <el-form-item label="薪水：">
              <span>{{ orderData.salary}}元</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作周期：">
              <span>{{ orderData.workCycle }}天</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="60">
          <el-col :span="12">
            <el-form-item label="手机号码：">
              <span>{{ orderData.publishingPhone }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间：">
              <span>{{ orderData.beginTime }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>


    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="orderNum"
          label="订单编号"
          width="220">
      </el-table-column>
      <el-table-column
          prop="sendUser"
          label="发布人"
          width="170">
      </el-table-column>
      <el-table-column
          prop="isSuerTelephone"
          label="发布人电话"
          width="180">
      </el-table-column>
      <el-table-column
          prop="receiveUser"
          label="接收人"
          width="170">
      </el-table-column>
      <el-table-column
          prop="taskTitle"
          label="任务标题"
          width="360"
      >
      </el-table-column>
      <el-table-column
          prop="salary"
          label="任务酬劳/元">
      </el-table-column>
      <el-table-column
          prop="workCycle"
          label="项目周期/天">
      </el-table-column>

      <el-table-column
          fixed="right"
          label="操作"
          width="200px">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row.orderId)" type="primary"><i class="el-icon-user"></i> 查看</el-button>
          <el-button @click="settlement(scope.row)" v-if="scope.row.orderStatus===1" type="success">结算</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination style="margin-top: 20px"
                   @current-change="handleCurrentChange"
                   background
                   :current-page.sync="currentPage"
                   layout="prev, pager, next"
                   :total=total>
    </el-pagination>

  </el-card>


</template>

<script>
import Vue from "vue";

export default {
  name: "adminSettlement",
  data() {
    return {
      dialogTableVisible: false,
      inputValue: '',
      inputSelect: '',
      tableData: [],
      orderData: {},
      total: 0,
      currentPage: 1,
    }
  },
  methods: {

    refresh() {
      this.initList();
    },
    handleCurrentChange(newPage) {
      this.getData(newPage, this.inputValue)
    },

    initList() {
      this.currentPage = 1
      this.inputValue = ''
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.getData(this.currentPage, '')
      loading.close()

    },
    search() {
      this.currentPage = 1
      this.inputValue = this.inputSelect
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.getData(this.currentPage, this.inputValue)
      loading.close()
    },


    async getData(pageNum, keyword) {
      const {data: res} = await this.$http.get('/AOC/settlementingOrder', {
        params: {
          pageNum: pageNum,
          pageSize: 10,
          keyword: keyword
        }
      })
      this.tableData = []
      this.tableData = res.content.list
    },

    settlement(row) {
      this.toDo('/AOC/agreeToSettlement', row)
    },

    async toDo(url, row) {
      const {data: res} = await this.$http.get(url, {
        params: {
          orderId: row.orderId,
          taskId: row.taskId
        }
      })
      if (res) {
        this.Yes()
        this.initList();
      } else {
        this.No()
      }
    },
    Yes() {
      Vue.prototype.$notify.success({
        title: "成功",
        message: '设置成功'
      })
    },
    No() {
      Vue.prototype.$notify.success({
        title: "失败",
        message: '设置失败'
      })
    },
    handleClick(orderId) {
      this.dialogTableVisible = true;
      this.getOrderData(orderId)
    },
    async getOrderData(orderId) {
      const {data: res} = await this.$http.get('/order/' + orderId)
      this.orderData = res.content
    },

  }
  ,
  mounted() {
    this.initList()
  }
}
</script>

<style scoped>

</style>